<template>
  <div class="router-detail">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div class="content-img" @click="openModal(item.img, item)">
          <img :src="getAssetImage(item.img)" alt="" />
        </div>
        <div class="content-title" @click="showImage(item.img)">
          {{ item.title }}
        </div>
        <div class="contentlist">
          <img :src="getAssetImage(item.headImg)" alt="" />
          <div class="contentlist-name">{{ item.name }}</div>
          <div class="aixin1">
            <i class="iconfont icon-dianzanaixin"></i>
            <span>{{ item.likes }}</span>
          </div>
        </div>
      </li>
      <li v-if="currentImage">
        <img :src="getAssetImage(currentImage)" alt="当前图片" />
      </li>
    </ul>
    <!-- 弹窗 -->
    <div v-if="isModalOpen" class="modal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <span class="close" @click="closeModal">&times;</span>

        <div class="container">
          <div class="left">
            <img
              :src="getAssetImage(currentImage)"
              alt="弹框图片"
              class="left-img"
            />
          </div>

          <div class="right">
            <div class="right-top" v-if="currentItem">
              <img
                class="touxiang"
                :src="getAssetImage(currentItem.headImg)"
                alt="头像"
              />
              <span>{{ currentItem.name }}</span>

              <button
                type="button"
                :class="['guanzhu', { active: isFollowed }]"
                @click="toggleFollow"
              >
                {{ buttonText }}
              </button>
              
            </div>
            
             
            

            <div class="right-bottom">
              <div class="biaoti">
                <div class="biaoti-container">
                  <h2><strong>大标题是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</strong></h2>
                  <h3>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</h3>
                </div>
              </div>
              
              <div class="Date">{{ currentDate }}
                <button @click="toggleReportOptions">...</button>
                <div v-if="showReportOptions" class="report-options">
                  <li>举报</li>
                </div>
                <hr>
                <div class="user" >
                  <img
                class="touxiang2"
                :src="getAssetImage(currentItem.headImg)"
                alt="头像"
              />用户1 </div>
              <span class="pinglun"><strong>我是评论！！</strong></span>
              <div class="Date1">{{ currentDate }} </div>
              <div class="chat"><i class="iconfont icon-aixin" style="font-size: small;margin-left: 80px;">赞</i>
                <i class="iconfont icon-pinglun" style="font-size: small;">8</i></div>
              </div>
              
              

              
              <div class="container-bot">
                <input type="text"  placeholder="说点什么..." />
                <div class="icon-container">
                  <i class="iconfont icon-aixin">189</i>
                  <i class="iconfont icon-shoucang">47</i>
                  <i class="iconfont icon-pinglun">1751</i>
                  <i class="iconfont icon-31zhuanfa"></i>
                </div>
              
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted,computed } from "vue";

export default {
  emits: ['yourEventName'],
  setup() {
    const currentImage = ref("");
    const currentItem = ref(null);
    const isFollowed = ref(false); //用于跟踪关注状态
    const isModalOpen = ref(false);
    const currentDate = ref('');
    const getAssetImage = (imgsrc) => new URL(imgsrc, import.meta.url).href;

    //很奇怪的地方，回头问问！！！！
    let currentTime = new Date();
    const location = ref("正在获取位置...");
    const updateTime = () => {
      const now = new Date();
      currentTime.value = now.toLocaleString();
    };
    const getLocation = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const { latitude, longitude } = position.coords;
            location.value = `纬度: ${latitude}, 经度: ${longitude}`;
          },
          () => {
            location.value = "位置获取失败";
          }
        );
      } else {
        location.value = "不支持地理位置服务";
      }
    };
    onMounted(() => {
      updateTime();
      getLocation();
      setInterval(updateTime, 1000); // 每秒更新时间
      toggleFollow(); // 仅用于调试
      const date = new Date();
      console.log(date);
      
      currentDate.value = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    });
    ////到这里为止哦！！！

    //举报按钮
    const showReportOptions = ref(false);
    const toggleReportOptions = () => {
      showReportOptions.value = !showReportOptions.value;
    };

    const buttonText = computed(() => {
      return isFollowed.value ? "已关注" : "关 注";
    });

    const toggleFollow = () => {
      console.log("toggleFollow 被调用"); // 调试输出
      isFollowed.value = !isFollowed.value; // 切换关注状态
      console.log('关注状态:', isFollowed.value); // 打印当前状态
    };
    

    const showImage = (img) => {
      currentImage.value = img; // 更新当前图片
      isModalOpen.value = true; // 打开模态框
    };
    const items = ref([
      {
        img: "./image/30.jpg",
        title: "标题1",
        headImg: "./image/30.jpg",
        name: "名字1",
        likes: 1023,
      },
      {
        img: "./image/baby.webp",
        title: "标题2",
        headImg: "./image/baby.webp",
        name: "名字2",
        likes: 5003,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/6.webp",
        name: "名字3",
        likes: 208,
      },
      {
        img: "./image/7.webp",
        title: "标题2",
        headImg: "./image/7.webp",
        name: "名字4",
        likes: 4568,
      },
      {
        img: "./image/2.jpg",
        title: "标题2",
        headImg: "./image/2.jpg",
        name: "名字5",
        likes: 5569,
      },
      {
        img: "./image/3.jpg",
        title: "标题2",
        headImg: "./image/3.jpg",
        name: "名字5",
        likes: 934,
      },
      {
        img: "./image/01.jpg",
        title: "标题2",
        headImg: "./image/01.jpg",
        name: "名字5",
        likes: 9323,
      },
      {
        img: "./image/6.webp",
        title: "标题2",
        headImg: "./image/6.webp",
        name: "名字5",
        likes: 569,
      },
      {
        img: "./image/7.webp",
        title: "标题2",
        headImg: "./image/7.webp",
        name: "名字4",
        likes: 9768,
      },
      {
        img: "./image/8.webp",
        title: "标题2",
        headImg: "./image/8.webp",
        name: "名字4",
        likes:7548,
      },
      {
        img: "./image/22.webp",
        title: "标题2",
        headImg: "./image/22.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/30.jpg",
        title: "标题2",
        headImg: "./image/30.jpg",
        name: "名字4",
        likes: 3248,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 358,
      },
      {
        img: "./image/02.jpg",
        title: "标题2",
        headImg: "./image/02.jpg",
        name: "名字4",
        likes: 7568,
      },
      {
        img: "./image/03.jpg",
        title: "标题2",
        headImg: "./image/03.jpg",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/04.jpg",
        title: "标题2",
        headImg: "./image/04.jpg",
        name: "名字4",
        likes: 1230,
      },
      {
        img: "./image/baby.webp",
        title: "标题2",
        headImg: "./image/baby.webp",
        name: "名字2",
        likes: 5003,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/6.webp",
        name: "名字3",
        likes: 208,
      },
      {
        img: "./image/7.webp",
        title: "标题2",
        headImg: "./image/7.webp",
        name: "名字4",
        likes: 4568,
      },
      {
        img: "./image/2.jpg",
        title: "标题2",
        headImg: "./image/2.jpg",
        name: "名字5",
        likes: 5569,
      },
      {
        img: "./image/3.jpg",
        title: "标题2",
        headImg: "./image/3.jpg",
        name: "名字5",
        likes: 934,
      },
      {
        img: "./image/01.jpg",
        title: "标题2",
        headImg: "./image/01.jpg",
        name: "名字5",
        likes: 9323,
      },
      {
        img: "./image/6.webp",
        title: "标题2",
        headImg: "./image/6.webp",
        name: "名字5",
        likes: 569,
      },
      {
        img: "./image/7.webp",
        title: "标题2",
        headImg: "./image/7.webp",
        name: "名字4",
        likes: 9768,
      },
      {
        img: "./image/8.webp",
        title: "标题2",
        headImg: "./image/8.webp",
        name: "名字4",
        likes:7548,
      },
      {
        img: "./image/22.webp",
        title: "标题2",
        headImg: "./image/22.webp",
        name: "名字4",
        likes: 8,
      },
      {
        img: "./image/30.jpg",
        title: "标题2",
        headImg: "./image/30.jpg",
        name: "名字4",
        likes: 3248,
      },
      {
        img: "./image/1.webp",
        title: "标题2",
        headImg: "./image/1.webp",
        name: "名字4",
        likes: 358,
      },
      {
        img: "./image/02.jpg",
        title: "标题2",
        headImg: "./image/02.jpg",
        name: "名字4",
        likes: 7568,
      },
      {
        img: "./image/03.jpg",
        title: "标题2",
        headImg: "./image/03.jpg",
        name: "名字4",
        likes: 8,
      },
      // 更多项...
    ]);

    const openModal = (img, item) => {
      currentImage.value = img; // 更新当前图片
      isModalOpen.value = true; // 开启模态框
      currentItem.value = item; //设置当前项
    };
    const closeModal = () => {
      isModalOpen.value = false; //关闭模态框
      currentImage.value = ""; //清空当前图片
      currentItem.value = null; //清除当前项
    };

    return {
      showReportOptions,
      toggleReportOptions,
      currentDate,
      items,
      currentImage,
      showImage,
      getAssetImage,
      openModal,
      closeModal,
      isModalOpen,
      currentTime,
      location,
      currentItem,
      isFollowed,
      buttonText,
    };
  },
};
</script>
<style scoped>


.Date1{
  color: #a4a0a0;
  margin-left:80px ;
}
.pinglun{
  margin-left: 80px;
  margin-top: -20px;


}
.user{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: start;
  margin-left: -250px;
  color: #8a8888;
}
.touxiang2{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
  
}
hr{
  width:100%;
  height: 1px;
  margin-top: 20px;
  border: 1px solid rgb(230, 230, 230);
}
.report-options li{
  width: 100px;
  list-style-type: none; /* 移除项目符号 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 250px;
  font-size: 16px;
  margin-top: 1px;

}
/**日期获取 */
.Date button{
  margin-left: 250px;
  cursor: pointer;
  border-radius: 20px;
  margin-top: -25px;
  border: none;
}
.Date button:hover{
  background-color: rgb(192, 189, 189);
  border-radius: 20px;
}

.Date{
  width: 100%;
  height: auto;
  margin-top: 260px;
  display: flex;
  flex-direction: column;
}

/* 底部转发，点赞，收藏样式 */

.container-bot {
  display: flex; /* 使用 flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 子元素之间的间距 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-top:1px solid #d8d5d5;
  background-color: white; /* 背景色，确保内容可见 */
  border-radius: 20px;

  
}

.container-bot input {
  margin-right: 5px; /* 输入框与图标之间的间距 */
  width: 150px;
  height: 50px;
  background-color: #f9f6f6;
  border-radius: 50px;
  border: none;
  background-image: url('');
}

.icon-container {
  display: flex; /* 使图标容器也使用 flexbox */
  gap: 10px; /* 图标之间的间距 */
  margin-right: 30px;
}
.iconfont{
  /* font-weight: bold; 加粗字体图标 */
  font-size: 20px; /* 调整图标大小（可选） */
  stroke-width: 50; /* 增加线条的粗细,这是svg图标的加粗方式 */
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5)); /* 添加阴影效果 */
}
.modal {
  /* 弹窗样式 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(71, 67, 67, 0.5);
}
.modal-content {
  display: flex;
  width: 900px;
  height: 700px;
  background-color: #fff;
  border-radius: 20px;
  transform-origin: left top;
  border: 1px solid gray;
  position: relative;
  z-index: 12;
  margin-top: 40px;
}
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: rgb(26, 25, 25);
  font-size: 24px;
  cursor: pointer;
}
/* 弹框左边图像 */
.left {
  width: 500px;
  height: 700px;
  border-radius: 20px;
  float: left;
}
.left-img {
  display: flex;
  width: 500px;
  height: 700px;
  object-fit: contain;
  justify-content: center;
  align-items: center;
}
/* 弹框右边 */
.right {
  
  width: 400px;
  height: 700px;
  display: flex;
  flex-direction: column;
  position: absolute;
  margin-top: -20px;
  margin-right: -20px;
}
.right-top {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  width: 400px;
  height: 80px;
  position: fixed;
  z-index: 10; 
  border-bottom:1px solid #d8d5d5;
  margin-top: 10px;
}
.right-bottom {
 
  flex-grow: 1; /*占据剩余空间*/
  padding: 10px;
  overflow-y: auto; /*如果内容超出允许滚动*/
  overflow: hidden;/** 隐藏滚动条*/

}
.touxiang {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}
.right-top span {
  margin-right: 20px; /* 调整用户名和关注按钮之间的间距 */
}
.guanzhu {
  background-color: red;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  width: 96px;
  height: 32px;
  margin-left: 100px;
  cursor: pointer;
  border: none;
}
.guanzhu.disabled {
  background-color: rgb(244, 237, 237); /* 已关注时的背景颜色 */
  color: rgba(105, 104, 104, 0.829);
}

/**标题类样式 */
h2 {
  white-space: nowrap; 
  width: 100%;
  overflow: hidden;/**隐藏溢出内容 */
  text-overflow: ellipsis;/**使用省略号 */
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
  margin-bottom: 8px;
}
.h3 {
  width: 100%;
  height: auto;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #666;
  white-space: pre-wrap;/**文本保留空格和换行，同时允许在达到容器边界时换行 */
  overflow-wrap: break-word; /**它允许在单词超过容器宽度时进行换行 */
}
.biaoti {
  position: relative;

}
.biaoti-container {
  width: 100%;
  height: auto;
  position: absolute;
  margin-top: 80px;
}


/* 分割线 */
.divider {
  border: none; /* 去掉默认边框 */
  height: 1px; /* 设置高度 */
  width: 900px;
  background-color: rgb(116, 114, 114); /* 设置颜色 */
  margin-top: 300px;
  margin-left: 30px;
}

.router-detail{
  top: 430px;
  left: 200px;
  width: 1354px;
  height: 100vh;
  border: 0;
  background-color: #fff;
  margin-left: -190px;
  overflow: auto; /* 允许滚动 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.router-detail ul{
  width: 100%;
  margin: auto;
  margin-left: 10px;
  column-count: 5;
  column-gap: 10px;


}
.router-detailn ul li{
  
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 10px;

  break-inside: avoid; /* 列里面的对象不截断 */
}


li:hover {
  cursor: pointer;
}
@media (max-width: 1200px) {
  ul {
    grid-template-columns: repeat(3, 1fr); /* 每行3个 */
  }
}

@media (max-width: 800px) {
  ul {
    grid-template-columns: repeat(2, 1fr); /* 每行2个 */
  }
}

@media (max-width: 500px) {
  ul {
    grid-template-columns: 1fr; /* 每行1个 */
  }
}

.content-img {

  width: 100%;
  height: auto; /* 自适应高度 */
  object-fit: contain;
}

.content-img img {
  width: 100%;
  height: auto;
  opacity: 1;

}
.content-img img:hover{
  opacity: 0.5;
  background-color: rgba(211, 211, 211, 0.5); /* 浅灰色滤镜，透明度0.5 */
}
.content-img:hover {
  box-shadow: 0 4px 10px grey;
}

.content-title {
  padding: 12px; /* 内边距 */
  font-size: 1.1em; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 字体颜色 */
  text-overflow: ellipsis; /* 省略号 */
  overflow: hidden; /* 隐藏溢出 */
  white-space: nowrap; /* 不换行 */
  max-width: 100%;
}

.contentlist {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 8px 12px; /* 内边距 */
  border-top: 1px solid #eaeaea; /* 顶部边框 */
}

.contentlist img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.contentlist-name {
  margin-left: 8px; /* 名字与头像间距 */
  font-size: 0.9em; /* 字体大小 */
  color: #666; /* 字体颜色 */
}

.aixin1 {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-left: auto; /* 向右对齐 */
  font-size: 0.9em; /* 字体大小 */
  color: #999; /* 字体颜色 */


}

.iconfont {
  margin-right: 4px; /* 图标与文本间距 */
}
</style>